<template>
  <div>
    <!--按钮-->
    <el-button
      type="primary"
      :disabled="btnDisabled"
      @click="buttonClick()"
    >
      {{buttonMeta.btnTitle}}({{buttonMeta.hotkey}})
    </el-button>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

// 调用服务
// eslint-disable-next-line import/no-absolute-path
import service from '/services'

// 新的列表页面的管理类
import dataListManage from '../../controller/state-list.js'
import { getList } from '../../controller/data-list-controller.js'

import { ElMessageBox, ElMessage } from 'element-plus'

const msgBox = {
  confirmButtonText: '删除', // + dataListState.choice.dataId,
  cancelButtonText: '后悔了',
  type: 'warning'
}
const msgSucess = {
  type: 'success',
  message: '删除成功！'
}
const msgError = {
  type: 'info',
  message: '已经取消了。'
}

</script>

<script setup>

// 属性：模块ID
const props = defineProps({
  moduleId: [Number, String],
  buttonMeta: Object
})

// 设置按钮是否可用
const btnDisabled = ref(true)

// 子组件里面获取状态
const dataListState = getList()

// 单击按钮，执行删除操作
const buttonClick = () => {
  // model.delete(moduleId, actionId, dataId).then(() = > {})
  if (!btnDisabled.value) {
    ElMessageBox.confirm(`此操作将删除该记录(${dataListState.choice.dataId}), 是否继续？`, '温馨提示', msgBox)
      .then(() => {
        // 访问后端API
        service(props.moduleId, props.buttonMeta.actionId, {}, dataListState.choice.dataId)
          .then(() => {
            ElMessage(msgSucess)
            dataListState.reloadPager()
          })
      })
      .catch(() => {
        ElMessage(msgError)
      })
  } else {
    const msgError1 = {
      type: 'info',
      message: '请先选择一条记录。'
    }
    ElMessage(msgError1)
  }
}

// 把自己的click事件，传递给父组件
const meta = props.buttonMeta
meta.events.buttonClick = buttonClick

// 监听选择的变化，记入状态
watch(() => dataListState.choice.dataId, (id) => {
  btnDisabled.value = id === ''
  if (props.buttonMeta.btnKind === 'add') {
    btnDisabled.value = false
  }
},
{ immediate: true })

</script>
